<template>
	<view class="game-content page">
		<status-bar :title='tabTitle' :back='0'></status-bar>
		<template v-if='list.length == 1'>
			<!-- 跑马灯 -->
			 <Marquee v-if='list[0].gameactTpl == "marquee"' isComponent='1' :gid='list[0].cid'></Marquee> 
			<!-- 大转盘 -->
			<roulette v-if='list[0].gameactTpl == "bigWheel"' isComponent='1' :gid='list[0].cid'></roulette>
			<!-- 摇一摇 -->
			<shark v-if='list[0].gameactTpl == "default"' isComponent='1' :gid='list[0].cid'></shark>
			<!-- 老虎机 -->
			 <tiger v-if='list[0].gameactTpl == "slotMachine"' isComponent='1' :gid='list[0].cid'></tiger>
		</template>
		
		<view class="game-center" v-if='list.length > 1'>
			<view class="game-item" v-for="(item,index) in list" :key='index' @click="toGame(item)">
				<image class="img" :src="imgUrl+item.img" mode="aspectFill"></image>
				<view class="title" v-if='item.title'>{{item.title}}</view>
				<view class="info" v-if='item.info'>{{item.info}}</view>
			</view>
		</view>
		<empty v-if='noData' type='1' cat='4' :msg='msg?msg:"没有相关配置哦"'></empty>
		<tabBar :tab="11"></tabBar>
	</view>
</template>

<script>
		import {mapState} from 'vuex';
	let that;
	import Marquee from '@/otherPage/lottery/good_luck.vue'
	import roulette from '@/otherPage/lottery/roulette'
	import shark from '@/otherPage/lottery/shark'
	import tiger from '@/otherPage/lottery/tiger'
	export default {
		components:{
			Marquee,
			roulette,
			shark,
			tiger
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				list: [],
				noData: false,
				msg:''
			};
		},
		onLoad() {
			this.getList()
		},
		methods:{
			toGame(item){
				if (item.gameactTpl == 'default') {
					//摇一摇
					uni.navigateTo({
						url: "/otherPage/lottery/shark?cid="+item.cid
					})
				} else if (item.gameactTpl == 'marquee') {
					//跑马灯
					uni.navigateTo({
						url: "/otherPage/lottery/good_luck?cid="+item.cid
					})
				} else if (item.gameactTpl == 'slotMachine') {
					//老虎机
					uni.navigateTo({
						url: "/otherPage/lottery/tiger?cid="+item.cid
					})
				} else if (item.gameactTpl == 'bigWheel') {
					//大转盘
					uni.navigateTo({
						url: "/otherPage/lottery/roulette?cid="+item.cid
					})
				}
			},
			getList(){
				that = this;
				that.noData = false
				that.$http.post({
					url: '/SRA_LuckDraw/gamesList',

				}).then(res => {
					if(res.code == 100){
						if(res.data && res.data.length > 0){
							that.list = res.data
						}else{
							that.noData = true
						}
					}else{
						that.list = []
						that.noData = true
						that.msg = res.notice
					}
				})
			}
		},
		computed:{
			...mapState(['tabTitle','vid','share','color'])
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.minH{
		min-height: calc(100vh - 100rpx)!important;
	}
	.game-center{
		padding: $uni-page-space;
		background-color: #FFFFFF;
		.game-item{
			border: 1px solid #F2F2F2;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: $uni-page-space;
			.img{
				width: 100%;
				height: 375rpx;
			}
			.title{
				font-size: 32rpx;
				font-weight: bold;
				margin: 20rpx;
			}
			.info{
				color: #999999;
				margin: 20rpx;
			}
		}
		
	}
</style>
